<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="/datepicker/css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
</head>
<body>
	<div class="container">
		<h1>The Activity Page</h1>
		<!-- Button trigger modal -->
		<button type="button" class="btn btn-primary btn-lg"
			data-toggle="modal" data-target="#myModal">创建活动</button>
		
		<table class="table">
			<thead>
				<tr>
					<th>title</th>
					<th>Category</th>
					<th>StartTime</th>
					<th>EndTime</th>
					<th>State</th>
					<th>Operation</th>
				</tr>
			</thead>
			<tbody>
				<tr th:each="aty:${list}">
					<td th:text="${aty.title}"></td>
					<td th:text="${aty.category}"></td>
					<td th:text="${#dates.format(aty.startTime, 'yyyy/MM/dd HH:mm')}"></td>
					<td th:text="${#dates.format(aty.endTime, 'yyyy/MM/dd HH:mm')}"></td>
					<td th:text="${aty.state==1?'有效':'无效'}"></td>
					<td><button type="button" class="btn btn-danger btn-sm" th:onclick="doDeleteObject([[${aty.id}]])">delete</button></td>
				</tr>
			</tbody>
		</table>
	</div>
	<!-- Modal(模态框) -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
			aria-labelledby="myModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<!-- 标题部分 -->
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
						<h4 class="modal-title" id="myModalLabel">创建活动</h4>
					</div>
					<!-- Body部分 -->
					<div class="modal-body">
						<form class="form-horizontal" th:action="@{/activity/doSaveActivity}" method="post">
							<div class="form-group">
								<label for="titleId" class="col-sm-2 control-label">标题</label>
								<div class="col-sm-10">
									<input type="text" class="form-control"  name="title" id="titleId"
										placeholder="title">
								</div>
							</div>
							<div class="form-group">
								<label for="categoryId" class="col-sm-2 control-label">类型</label>
								<div class="col-sm-10">
							   	   <select id="categoryId" name="category" class="form-control">
							   	       <option value="教育培训">教育培训</option>
							   	       <option value="企业活动">企业活动</option>
							   	       <option value="交友活动">交友活动</option>
							   	   </select>
								</div>
							</div>
							<div class="form-group" >
								<label for="startTimeId" class="col-sm-2 control-label">开始时间</label>
								<div class="col-sm-10">
									<input type="text" class="form-control form_datetime"  name="startTime" id="startTimeId"
										placeholder="start time">
								</div>
							</div>
							<div class="form-group">
								<label for="endTimeId" class="col-sm-2 control-label">结束时间</label>
								<div class="col-sm-10">
									<input type="text" class="form-control form_datetime"  name="endTime" id="endTimeId"
										placeholder="end time">
								</div>
							</div>
							<div class="form-group">
								<label for="remarkId" class="col-sm-2 control-label">备注</label>
								<div class="col-sm-10">
									<textarea type="text" class="form-control"  rows="5" name="remark" id="remarkId">
								    </textarea>
								</div>
							</div>
					</form>
					</div>
					<!-- 按钮部分 -->
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
						<button type="button" class="btn btn-primary" onclick="doSaveObject()">Save Changes</button>
					</div>
				</div>
			</div>
     </div>
    
	<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
	<script src="/jquery/jquery.min.js"></script>
	<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
	<script src="/bootstrap/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="/datepicker/js/bootstrap-datetimepicker.min.js" charset="UTF-8"></script>
	<script type="text/javascript" src="/datepicker/js/locales/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
	<script type="text/javascript">
	  //datetimepicker函数由bootstrap-datetimepicker.min.js定义,用于初始化日期控件
	  $('.form_datetime').datetimepicker({//这里的form_datetime为input标签中的class选择器
		  language: 'zh-CN',
		  format: "yyyy/mm/dd",
		  autoclose: true
	  })
	   function doDeleteObject(id){
		   if(!confirm("确定删除吗?"))return;
		   location.href="/activity/doDeleteObject/"+id;//restful
	   }
	   function doSaveObject(){
		 //表单校验(可考虑使用正则表达式)
		 //提交表单
		 //$(form)基于标签名(例如这里的标签名form)称获取表单对象
		 //submit为jquery中的一个对象函数,通过此函数可以提交表单.
		  $("form").submit();//提交表单
	   }
	</script>
	
</body>
</html>